<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<head>
<style>
img {
  opacity: 0.5;
}

img:hover {
  opacity: 1.0;
}
</style>
</head>
<body>

<h1>图像透明度</h1>

<p>opacity 属性常与 :hover 选择器一起使用，改变鼠标悬停时的不透明度：</p>

<img src="../w3logo-1.png" alt="Tulip" width="170" height="170">
<img src="../w3logo-1.png" alt="Tulip" width="170" height="170">
<img src="../w3logo-1.png" alt="Flower" width="170" height="170">


</body>
</html>